<template>
  <div class="login">
    <div class="el-row">
      <div class="left">
        <div class="pic">
          <div class="title animate__animated animate__fadeIn">
            <text>欢迎使用</text>
            <text>一个基于Vue3+Element-plus搭建的轻量级后台管理系统模板。</text>
            <text>持续更新中......</text>
          </div>
          <img src="@/assets/bg1-x97wy5vW.png" alt="" />
        </div>
      </div>
      <div class="right">
        <div class="form">
          <img src="@/assets/bg2-DSHDa8MG.png" alt="" />
          <div class="content">
            <div class="name">
              <p>宏信达商贸后台管理系统</p>
            </div>
            <el-form
              :model="loginForm"
              :rules="loginRules"
              class="login-form"
              ref="loginFormRef"
              :hide-required-asterisk="true"
            >
              <el-form-item prop="account" label="账号" class="login-item">
                <el-input
                  v-model="loginForm.account"
                  placeholder="请输入账号"
                />
              </el-form-item>
              <el-form-item prop="passWord" label="密码" class="login-item">
                <el-input
                  type="password"
                  v-model="loginForm.passWord"
                  placeholder="请输入登录密码"
                  show-password
                />
              </el-form-item>
              <el-form-item label="" prop="isPassing" class="dragContent">
                <div class="drag">
                  <drag-verify
                    ref="dragVerify"
                    v-model:isPassing="loginForm.isPassing"
                    :width="340"
                    :height="36"
                  />
                </div>
              </el-form-item>
              <el-form-item>
                <el-checkbox v-model="loginForm.remember">
                  记住登录状态
                </el-checkbox>
              </el-form-item>
              <el-button
                :disabled="loginDisabled"
                @click="login(loginForm)"
                type="primary"
                :loading="loading"
                class="btn"
              >
                登录
              </el-button>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import DragVerify from '@/components/DragVerify/Index.vue'
import { ElMessage, ElForm } from 'element-plus'
import useUserStore from '@/store/modules/user.ts'
const route = useRoute()
const router = useRouter()
let useStore = useUserStore()
let loading = ref(false)
// 定义 formRef（校验规则）
type FormInstance = InstanceType<typeof ElForm>
const loginDisabled = shallowRef<boolean>(false)
const loginFormRef = shallowRef<FormInstance>()
const loginForm = reactive<any>({
  account: 'admin',
  passWord: '123456',
  remember: false,
  isPassing: true,
})
const loginRules = reactive<any>({
  account: [
    { required: true, message: '请输入登录用户名', trigger: 'blur' },
    { required: true, min: 5, message: '账号长度最少五位', trigger: 'blur' },
  ],
  passWord: [
    { required: true, message: '请输入登录密码', trigger: 'blur' },
    { required: true, min: 6, message: '密码长度最少六位', trigger: 'blur' },
  ],
  isPassing: [
    {
      type: 'enum',
      message: '请拖动滑块验证',
      enum: [true],
    },
  ],
})
onMounted(() => {
  // 监听enter事件（调用登录）
  document.onkeydown = (e: any) => {
    e = window.event || e
    if (e.code === 'Enter' || e.code === 'enter' || e.code === 'NumpadEnter') {
      if (loading.value) return
      login(loginForm)
    }
  }
})
const login = async (loginForm: any) => {
  if (!loginForm) return
  if (loginDisabled.value) return
  //表单校验
  await loginFormRef.value?.validate()
  loading.value = true
  if (!loginForm.isPassing) {
    ElMessage.warning('请拖动滑块')
    return
  }
  loading.value = true
  const data = {
    username: loginForm.account,
    password: loginForm.passWord,
  }
  const redirect:any = route.query.redirect
  try {
    await useStore.userLogin(data)
    router.push({ path: redirect ?? '/home' })
    ElMessage.success('登陆成功')
  } catch (error) {
    loginDisabled.value = false
    console.log(error)
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  display: flex;
  height: 100vh;
  overflow: hidden;
  .el-row {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    box-sizing: border-box;
    .left {
      width: 50%;
      display: block;
      max-width: 58.3333333333%;
      flex: 0 0 58.3333333333%;
      .pic {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        .title {
          margin: auto;
          position: absolute;
          top: 160.0012px;
          right: 180px;
          display: flex;
          flex-direction: column;
        }
        img {
          position: absolute;
          bottom: 0;
          width: 100%;
        }
      }
    }
    .right {
      width: 50%;
      display: block;
      max-width: 41.6666666667%;
      flex: 0 0 41.6666666667%;
      .form {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        img {
          position: absolute;
          top: 0;
          width: 100%;
        }
        .content {
          padding: 2.5rem;
          box-shadow: 0 0 10.0012px 1.9988px #0000001a;
          .name {
            font-size: 30px;
            width: 100%;
            height: 20%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .login-form {
            padding: 6px;
            width: 330px;
            .btn {
              width: 332px;
            }
            .login-item {
              margin-top: 20px;
              width: 330px;
            }
            .dragContent {
              display: inline-block;
              margin-left: 50%;
              transform: translate(-50%, 0);
              .drag {
                margin-top: 20px;
                border-radius: 2px;
                opacity: 1;
                .drag_verify {
                  margin: 0 auto;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
